<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="额度申请编号:" prop="calcSchemeCode">
          <el-input v-model="queryParams.calcSchemeCode" clearable placeholder="请输入额度申请编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="产品方案名称:" prop="schemeName">
          <el-input v-model="queryParams.schemeName" clearable placeholder="请输入产品方案名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="出租方:" prop="lessorId">
          <el-select v-model="queryParams.lessorId" clearable>
            <template v-for="dict in rentOutList">
              <el-option :label="dict.deptName" :value="dict.deptId" :key="dict.deptId"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="承租方:" prop="leaseeId">
          <el-select v-model="queryParams.leaseeId" clearable filterable>
            <template v-for="dict in CustomerList">
              <el-option :label="dict.customerName" :value="dict.customerId" :key="dict.customerId"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>
    <div class="card-wrap card-padding">
      <div class="form-table">
        <!-- :span-method="objectSpanMethod" -->
        <el-table v-loading="loading" :data="dataList" style="width: 100%; margin: 0 auto" :row-class-name="getRowClass">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.prePlanList" border style="width: 100%" v-if="props.row.prePlanList.length > 0">
                <el-table-column label="申请类型" align="center" prop="applyTypeStr" />
                <el-table-column label="品牌" align="center" prop="carBrandName" />
                <el-table-column label="车型" align="center" prop="carModelName" min-width="260px" show-overflow-tooltip />
                <el-table-column label="车系" align="center" prop="carSeriesName" />
                <el-table-column label="车辆类型" align="center" prop="carTypeStr" />
                <el-table-column label="车牌" align="center" prop="carPlateNo" />
                <el-table-column label="租期" align="center" prop="planTenancyTypeStr" />
                <el-table-column label="支付时间" align="center" prop="planPaymentMethodTypeStr" />
                <el-table-column label="批过数量" align="center" prop="quantityApproved" />
                <el-table-column label="已下单数量" align="center" prop="quantityUsed" min-width="150px" show-overflow-tooltip />
                <el-table-column label="待下单数量" align="center" prop="quantitySurplus" min-width="150px" show-overflow-tooltip />
                <el-table-column label="车辆来源" align="center" prop="carSourceTypeStr" />
                <el-table-column label="登记性质" align="center" prop="operationTypeStr" />
                <el-table-column label="里程限制（公里）" align="center" prop="maintenanceAnnualMileageVal" min-width="150px" show-overflow-tooltip />
                <el-table-column label="上牌城市" align="center" prop="carLicenseCityVal" />
                <el-table-column label="保证金" align="center" prop="planContractCashdeposit" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.planContractCashdeposit)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="每期租金" align="center" prop="planRent" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.planRent)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="残值" align="center" prop="planResidual" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.planResidual)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车辆指导价" align="center" prop="carGuidePrice" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.carGuidePrice)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="车辆销售价" align="center" prop="purchasePrice" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.purchasePrice)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="当期评估价" align="center" prop="carCurrentAppraisal" min-width="150px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{format_thousand(scope.row.carCurrentAppraisal)}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center" prop="preOrderId">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.quantitySurplus !== 0" @click="placeAnOrder(scope.row)" v-hasPermi="['placeOrder:rules:add']">下单</el-button>
              <el-button type="text" @click="placeAnOrderDetail(scope.row)" v-hasPermi="['placeOrder:rules:detail']">下单详情</el-button>
            </template>
          </el-table-column>
          <el-table-column label="出租方" align="center" prop="lessorName" />
          <el-table-column label="承租方" align="center" prop="leaseeName" min-width="200px" show-overflow-tooltip />
          <el-table-column label="额度申请编号" align="center" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="goToDetail(scope.row.calcSchemeId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品方案编号" align="center" min-width="100px" show-overflow-tooltip prop="schemeCode" />
          <el-table-column label="产品方案名称" align="center" min-width="150px" show-overflow-tooltip prop="schemeName" />
          <el-table-column label="业务来源" align="center" prop="sourceBusinessTypeStr" />
          <el-table-column label="租赁用途" align="center" prop="useTypeStr" />
          <el-table-column label="批过数量" align="center" prop="quantityApproved" />
          <el-table-column label="已下单数量" align="center" prop="quantityUsed" width="120" />
          <el-table-column label="待下单数量" align="center" prop="quantitySurplus" width="120" />
        </el-table>
      </div>
      <div class="form-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 50]" layout="total,  prev, pager, next,sizes, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { getOrderList, getListNoPermission } from '@/api/vehicleOrder'
import { getCustomerList } from '@/api/memberManage/memberList'
export default {
  name: 'PlaceOrderView',
  components: {
    SearchContent,
  },
  dicts: ['car_status'],
  data() {
    return {
      rentOutList: [],
      CustomerList: [],
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      form: {},
      //   mergeObj: {}, // 用来记录需要合并行的下标
      //   mergeArr: [
      //     "preOrderId",
      //     "lessorName",
      //     "leaseeName",
      //     "calcSchemeCode",
      //     "schemeCode",
      //     "schemeName",
      //     "sourceBusinessTypeStr",
      //     "useTypeStr",
      //   ], // 表格中的列名
    }
  },
  created() {
    this.getList()
    this.getListNoPermission()
    this.getCustomerList()
  },
  methods: {
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    async getCustomerList() {
      let params = {
        pageNum: 1,
        pageSize: 10000,
      }
      try {
        let res = await getCustomerList(params)
        this.CustomerList = res.rows
      } catch (error) { }
    },
    async getListNoPermission() {
      try {
        let res = await getListNoPermission()
        this.rentOutList = res.data
      } catch (error) { }
    },
    // getSpanArr方法
    // getSpanArr(data) {
    //   this.mergeArr.forEach((key, index1) => {
    //     let count = 0; // 用来记录需要合并行的起始位置
    //     this.mergeObj[key] = []; // 记录每一列的合并信息
    //     data.forEach((item, index) => {
    //       // index == 0表示数据为第一行，直接 push 一个 1
    //       if (index === 0) {
    //         this.mergeObj[key].push(1);
    //       } else {
    //         // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
    //         if (item[key] === data[index - 1][key]) {
    //           this.mergeObj[key][count] += 1;
    //           this.mergeObj[key].push(0);
    //         } else {
    //           // 如果当前行和上一行其值不相等
    //           count = index; // 记录当前位置
    //           this.mergeObj[key].push(1); // 重新push 一个 1
    //         }
    //       }
    //     });
    //   });
    // },
    // 拆分数据数据
    // splitData(data) {
    //   const result = [];
    //   data.forEach((row) => {
    //     const pricingLists = row.prePlanList;
    //     if (pricingLists.length == 0) {
    //       result.push(row);
    //     } else {
    //       pricingLists.forEach((pricingList, index) => {
    //         const newRow = {
    //           ...row,
    //           ...pricingList,
    //         };
    //         result.push(newRow);
    //       });
    //     }
    //   });
    //   return result;
    // },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   // 判断列的属性
    //   if (this.mergeArr.indexOf(column.property) !== -1) {
    //     // 判断其值是不是为0
    //     if (this.mergeObj[column.property][rowIndex]) {
    //       return [this.mergeObj[column.property][rowIndex], 1];
    //     } else {
    //       // 如果为0则为需要合并的行
    //       return [0, 0];
    //     }
    //   }
    // },
    getRowClass({ row }) {
      if (row.prePlanList?.length === 0 || row.prePlanList === undefined) {
        // 即该行没有子元素时，添加row-expand-cover类
        return 'row-expand-cover'
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    // 下单
    placeAnOrder(row) {
      this._toPage({
        path: '/vehicleOrder/placeOrder/placeOrderAdd',
        name: 'PlaceOrderAdd',
        query: {
          immunityAuditType: row.immunityAuditType,
          rentType: row.rentType,
          preOrderId: row.preOrderId,
          orderId: row.orderId,
          type: row.carSourceType,
          beFrom: 'PlaceOrderView',
          leaseeId: row.leaseeId,
          lessorId: row.lessorId,
          sourceBusinessType: row.sourceBusinessType,
          leaseContractTemplateId: row.leaseContractTemplateId,
          calcSchemeId: row.calcSchemeId,
          calcSchemeCode: row.calcSchemeCode,
          applicationNo: row.applicationNo,
        },
      })
    },
    // 下单详情
    placeAnOrderDetail(row) {
      this._toPage({
        name: 'OrderView',
        query: {
          preOrderId: row.preOrderId,
          isMenu: true,
        },
      })
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true
      getOrderList(this.queryParams).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.total = total
          this.loading = false
          this.dataList = rows
          //   this.dataList = this.splitData(rows);
          //   this.dataList && this.getSpanArr(this.dataList);
        }
      })
    },
    reset() {
      this.form = {}
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      ; (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        this.handleQuery()
    },
  },
}
</script>

<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}

.form-pagination {
  text-align: right;
  margin-top: 20px;
}

.form-dialog {
  ::v-deep .el-dialog__header {
    padding: 10px 20px;
    border-bottom: 1px solid #dcdfe6;

    .el-dialog__headerbtn {
      top: 15px;
    }
  }

  .box-card {
    margin-bottom: 20px;

    .card-title {
      font-size: 16px;
      position: relative;
      margin-left: 8px;
      padding: 0;
    }

    .card-title::after {
      content: "";
      width: 4px;
      height: 18px;
      background-color: aqua;
      display: block;
      position: absolute;
      left: -12px;
      top: 2px;
    }
  }
}
</style>
